<template>
	<view class="upload-box">
		<!-- <view class="upload-title">
			<text class="left">商品图片</text>
			<text class="right">点击+上传</text>
		</view> -->
		<view class="zhtx-imgs">
			<view class="zhtx-single" v-for="(item, index) in list" :key="index" >
				<image class="img-item" :src="item" :data-src="item" mode="aspectFill" @tap="previewImg" />
				<view class="zhtx-del" @tap="deleteItem(index)">×</view> 
			</view>
			<view v-if="limit>list.length" class="zhtx-single zhtx-addNew" @tap="chooseFile">
				<text class="zhtx-add">+</text>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	let toast= msg=>{
		uni.showToast({
			title: msg,
			icon:'none'
		});
	}
	var app = getApp()
	export default {
		props: {
			uImgList: {
				type: Array, //附件列表
				default () {
					return []
				}
			},
			uploadFileUrl: {
				type: String,
				dafault: '#' // 上传文件的服务器url
			},
			header: {
				type: Object, //上传图片到服务器时，HTTP 请求 Header
				default () {
					return {}
				}
			},
			limit: {
				type: Number, //限制可上传的图片数量
				default: 9 //这里有问题???
			},
			fileKeyName: {
				type: String,
				default: 'file' //用于在服务端通过自定义key值获取该文件数据
			},
			canUploadFile: { //是否更新
				type: Boolean,
				default: true
			}
		},
		computed: {
			list: {
				get(){
					return this.uImgList
				}
			}
		},
		data() {
			return {
				imageList: [],
			};
		},
		methods: {
			//预览
			previewImg(e) {
				console.log(...this.list);
				uni.previewImage({
					current: e.target.dataset.src,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					urls: this.list   //this.imageList,保持删除了的不在
				});
			},
			//删除
			deleteItem(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此项吗？',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index,1)
							this.list.splice(index, 1);
							this.$forceUpdate(); //强制更新
							this.$emit('update:uImgList', this.list); //类似双向数据绑定
						}
					}
				});
			},

			chooseFile() {
				let _this = this
				//双重保证
				// console.log(this.list);
				if (this.list.length >= this.limit) {
					toast('已达到最大上传数量')
					return; 
				}
				
				let canUploadFile = this.canUploadFile;
				let tempFiles;
				if (canUploadFile) {
					uni.chooseImage({
						count: this.limit - this.list.length,
						sizeType: ['original', 'compressed'], 
						sourceType: ['album', 'camera'],
						success: (res) => {
							// console.log(res.tempFilePaths);
							tempFiles = res.tempFilePaths;
							console.log(tempFiles,'tempFiles')
							// this.imageList = this.imageList.concat(tempFiles)
							this.imageList = tempFiles
							
							console.log('999999999999999999999999',this.imageList);
							// this.list.push(...tempFiles)//如果图片一次性就超过这个值怎么使他赋的值回退
							// #ifdef H5
							if (this.imageList.length >= this.limit) {
								this.imageList.splice(this.limit - this.list.length)
								toast('已达到最大上传数量')
							}
							// #endif
							
							this.$emit('update:uImgList', this.list); //类似双向数据绑定,更新数据, 使用.sync修饰
							this.$forceUpdate();
							
							_this.upload()
							
						},
						fail:err=>{
							console.log(err);
						}
					});
						
				} 
			},
			
			upload(){
				uni.showLoading({
					title: '上传中...',
					mask: false
				});
				
				let param = {
					ticket: uni.getStorageSync('ticket'),
					'Device-Id': common['device_id'],
					'wxapp_type': common['wxapp_type'],
					'app_type': common['app_type']
				}
				console.log('99999999999999999999999',param)
				console.log('this.uploadFileUrl',this.uploadFileUrl)
				console.log('this.imageList',this.imageList)
				for(let i=0; i<this.imageList.length;i++){
					let path=this.imageList[i]
					let index=i.toString()
					console.log('path',path);
					uni.uploadFile({
						url: this.uploadFileUrl,
						name: this.fileKeyName,
						filePath: path, // 使用files上传数组列表,上面两者都会失效
						// file:[
						// 	{name:index,url:path}
						// ],
						formData: param,
						success:res=>{
							uni.hideLoading()
							console.log(res);
							this.$emit('uploadSuccess', res);
							if (res.statusCode == 200) {
								//上传成功将原信息,直接删除,
								// this.list.splice(i,1)
								res.data = JSON.parse(res.data)
								console.log('res.data图片上传成功',res.data);
								// this.list.splice(i, 1, res.data.result.url)
								this.list.push(res.data.result.url)
								this.$emit('update:uImgList', this.list);
								app.globalData.runImgList = this.list
								console.log('this.list图片上传成功',this.list);
								console.log('res图片上传成功',res);
								this.$forceUpdate();
							} else {
											
							}
						},
						fail:err=>{
							uni.hideLoading()
							toast(err.errMsg)
							console.log(err);
						}
					})
								
				}
				
			},
			
		}
	};
</script>

<style  scoped>
	.upload-box{
		background: #fff;
		margin-bottom: 10px;
	}
	.upload-title{
		display: flex;
		justify-content: space-between;
		padding: 15px 10px;
	}
	.upload-title .left, .upload-title .right{
		font-size: 14px;
		color: #333;
	}
	.upload-title .right{
		color: #999;
		font-size: 12px;
	}
	
	.zhtx-imgs {
		display: flex;
		align-items: center;
		padding:20upx;
	}
	.zhtx-del {
		position: absolute;
		width: 20px;
		height: 20px;
		background: #f56c6c;
		color: #fff;
		top: 0;
		text-align: center;
		right: 0;
		line-height: 20px;
		font-size: 16px;
		z-index: 5;
		border-radius: 50%;
	}
	.zhtx-single {
		position: relative;
		width: 100%;
		height: 180rpx;
		border: 3px dashed #efefef;
		border-radius: 6px;
	}
	.zhtx-addNew {
		display: flex;
		justify-content: center;
		align-items: center;	
	}
	.zhtx-add {
		font-size: 50px;
		font-weight: bold;
		color: #efefef;
	}
	.img-item {
		width: 100%;
		height: 100%;
		display: block;
		vertical-align: top;
	}
</style>
